<template>
  <div>
    <!-- 底部导航 -->
    <div class="C">
      <div class="container">
        <div class="stair">
          <div class="stair_ul">
            <ul>
              <li class="title">动物乐园</li>
              <li><a href="#">车行区</a></li>
              <li><a href="">步行区</a></li>
            </ul>
            <ul>
              <li class="title">游玩演艺</li>
              <li><a href="">亲子乐园</a></li>
            </ul>
            <ul>
              <li class="title">活动优惠</li>
              <li><a href="">新闻</a></li>
              <li><a href="">优惠信息</a></li>
              <li><a href="">主题活动</a></li>
            </ul>
            <ul>
              <li class="title">研学互动</li>
              <li><a href="">研学课堂</a></li>
              <li><a href="">动物互动</a></li>
            </ul>
            <ul>
              <li class="title">美味餐饮</li>
            </ul>
            <ul>
              <li class="title">计划行程</li>
              <li><a href="">游园指南</a></li>
              <li><a href="">游园提示</a></li>
              <li><a href="">园区时间</a></li>
              <li><a href="">交通指南</a></li>
              <li><a href="">常见问题</a></li>
              <li><a href="">地图下载</a></li>
              <li><a href="">游玩路线</a></li>
            </ul>
            <ul>
              <li class="title">关于我们</li>
              <li><a href="">园区简介</a></li>
            </ul>
          </div>
          <div class="stair_img">
            <div class="s_img1">
              <img src="../assets/img/code.jpg" alt="" />
              <h4>官网微信</h4>
            </div>
            <div class="s_img2">
              <img src="../assets/img/code2.jpg" alt="" />
              <h4>官方小程序</h4>
            </div>
          </div>
          <!-- <div class="stair_img2">
 
        </div> -->
          <a href="https://weibo.com/show8ox?topnav=1&wvr=6&topsug=1">
            <!-- <img src="../assets/img/wb.png" alt="" /> -->
          </a>
        </div>
        <!-- 咨询电话 -->
        <div class="stair_1">
          <div class="stair_1_phone">咨询电话：400-102-6688</div>
          <div class="stair_1_time">客服电话服务时间（8:30-17:30）</div>
        </div>
      </div>
      <div class="hell">
        杭州野生动物世界有限公司 版权所有 【
        <a>互动力</a> 承建 运营】
        <a>浙ICP备12012113号-1 </a>
        <a>浙公网安备 33018302000335号</a> 可信任网站
      </div>
    </div>
  </div>
</template>

<script>
  export default {};
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
  }
  li {
    list-style: none;
  }
  .container {
    width: 80%;
    margin: 0 auto;
  }
  /* 绿色背景图 */

  /******最底部 ******/
  .C {
    background-image: url(../assets/img/footerBg.jpg);
    background-position-x: center;
    background-position-y: center;
    /* background-repeat-x: initial;
  background-repeat-y: initial; */
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    background-size: cover;
  }
  .stair {
    display: flex;
    padding-top: 40px;
    position: relative;
  }
  .stair > .stair_ul {
    display: flex;
    padding: 0 15px;
    background-size: cover;
    width: 66.6%;
  }
  /* ul */
  .stair_ul ul {
    width: 14%;
    padding: 0;
    margin-bottom: 10px;
    margin: 0;
  }
  .stair_ul ul a {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    line-height: 28px;
  }
  /* li字 */
  .stair_ul ul .title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
  }
  /* 扫码模块 */
  .stair > .stair_img {
    /* display: block; */
    display: flex;
    width: 30%;
  }
  .stair > .stair_img > .s_img1,
  .s_img2 {
    padding: 0 15px;
  }
  .stair > .stair_img img {
    width: 102px;
    height: 101px;
  }
  .stair > .stair_img h4 {
    /* position: absolute; */
    display: block;
    color: #fff;
    margin: 10px 0;
    font-weight: 500;
    font-size: 15px;
    text-align: center;
  }
  /* .stair > .stair_img2 {
  display: block;
} */
  .stair > a img {
    /* display: block; */
    position: absolute;
    right: 20%;
    top: 85%;
    transform: translateY(-50%);
  }

  .stair_1 {
    padding-bottom: 50px;
    color: #fff;
    text-align: center;
  }
  .stair_1 > .stair_1_phone {
    margin-top: 50px;
    font-size: 44px;
  }
  .stair_1 > .stair_1_time {
    padding-top: 50px;
    font-size: 14px;
  }
  .hell {
    height: 52px;
    width: 100%;
    background-color: #000;
    color: #a6a5a4;
    text-align: center;
    margin-top: 30px;
    line-height: 52px;
    font-size: 14px;
  }
  .hell a:hover {
    cursor: pointer;
  }
</style>
